<template>
    <div id="mine"  v-if="userInfo.token">
         <van-nav-bar
            title="我的"
            :fixed=true
            :border=false
           >
         </van-nav-bar>

          <van-cell-group style="margin-top:2.6rem">
               <van-cell
                    style="background-color:#3bba63; color:#f5f5f5" 
                    label-class="labelClass"
                    is-link
                    :center=true
                    @click="$router.push('/dashboard/mine/userCenter')"
                >
                  <!-- 使用 title 插槽来自定义标题 -->
                  <template slot="title">
                      <div class="personMsg">
                          <img :src="userInfo.icon_url" alt="">
                          <div class="personInfo">
                               <span>{{userInfo.username}}</span>
                               <span>普通用户</span>
                               <span>手机号:{{userInfo.mobile}}</span> 
                          </div>
                      </div>
                  </template>
               </van-cell>
          </van-cell-group>
  
          <van-cell-group>
              <van-cell icon="label" title="我的订单" value="查看所有的订单" is-link to='/dashboard/mine/MyOrders'/>
              <van-grid :column-num="3">
                  <van-grid-item
                    v-for="(order,index) in orderData"
                    :key="index"
                    :icon="order.icon"
                    :text="order.title"
                  ></van-grid-item>
              </van-grid>
          </van-cell-group>

         <van-cell-group style="margin-top: 0.4rem">
            <van-cell title="个人资料" icon="gold-coin" value="1张" is-link></van-cell>
            <van-cell title="我的投放柜" icon="todo-list" is-link></van-cell>   
        </van-cell-group>
        <!--联系客服-->
        <van-cell-group style="margin-top: 0.4rem">
            <van-cell title="系统通知" icon="phone" value="客服时间 07:00-22:00" is-link></van-cell>
            <van-cell title="投诉建议" icon="smile-comment" is-link></van-cell>
        </van-cell-group>    
        <!--小撩买菜-->

        <van-cell-group style="margin-top: 0.4rem">
            <van-cell title="成为采购员" icon="gift-card"  is-link></van-cell>
        </van-cell-group>

        <van-cell-group style="margin-top: 0.4rem">
            <van-cell title="论坛" icon="gift-card" value="下载APP体验更佳" is-link></van-cell>
        </van-cell-group>
    
          <!-- 路由的出口 -->
         <transition name="router-slider" mode="out-in">
            <router-view></router-view>
          </transition>
    </div>
    <SelectLogin v-else/>
</template>
<script>
  import {mapState} from 'vuex'
  import SelectLogin from './../../views/login/SelectLogin'
     export default{
       name:"Mine",
       data(){
          return {
            orderData:[
                {icon:'cart-circle-o',title:"待支付"},
                {icon:'smile-comment-o',title:"待发货"},
                {icon:'smile-comment-o',title:"已完成"},
             ]
          }
       },

       computed:{
        ...mapState(["userInfo"]),  //因为它能够实时监控检测，所以计算属性中
      },

       components:{
           SelectLogin
       }



         }
</script>
<style lang="less" scope>
   #mine{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

   .van-nav-bar{
     background-color: #3bba63;
   }

   .van-nav-bar__title{
     color: #fff;
     font-size: 1rem;
   }

   .personMsg{
      display:flex;
      flex-direction:row;
      align-item:center;
   }

   .personMsg>img{
     width:4rem;
     height:4rem;
     border:0.12rem solid #FFF;
   }

   .personInfo{
     display:flex;
     flex-direction:column;
     margin-left:0.8rem;
   }

   .van-cell__left-icon{
       color:orangered;
       font-size:1.2rem;
   }


    .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>